<template>
  <!--  巡检记录-->
  <div>
    <!-- 右侧 -->
    <div class="right-col box-shadow">
      <!-- 搜索区域 -->
      <div class="search-area">
        <div class="form">
          <el-form
            :model="listQuery"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="115px"
          >
            <el-form-item :label="$t('任务名称') + ':'" prop="taskName">
              <el-input
                v-model.number="listQuery.taskName"
                :placeholder="$t('请输入')"
                clearable
                size="medium"
                maxlength="30"
                type="text"
                @keyup.enter.native="handleQuery"
                @change="numChange"
              />
            </el-form-item>
            <el-form-item :label="$t('任务类型') + ':'" prop="taskType">
              <el-select
                clearable
                size="medium"
                v-model="listQuery.taskType"
                :placeholder="$t('请选择')"
              >
                <el-option
                  v-for="dict in dict.type.taskType"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('开始时间') + ':'">
              <el-date-picker
                v-model="listQuery.startTime"
                type="date"
                size="medium"
                :placeholder="$t('选择开始时间')"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptionsStart"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('结束时间') + ':'">
              <el-date-picker
                v-model="listQuery.endTime"
                type="date"
                size="medium"
                :placeholder="$t('选择结束时间')"
                :picker-options="pickerOptionsEnd"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </el-form-item>
            <el-collapse-transition>
              <div v-if="isCollapse">
                <el-form-item :label="$t('巡检类型') + ':'" prop="viewType">
                  <el-select
                    clearable
                    v-model="listQuery.viewType"
                    :placeholder="$t('请选择')"
                    size="medium"
                  >
                    <el-option
                      v-for="dict in dict.type.viewType"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('巡检维度') + ':'" prop="dimension">
                  <el-select
                    clearable
                    v-model="listQuery.dimension"
                    :placeholder="$t('请选择')"
                    size="medium"
                  >
                    <el-option
                      v-for="dict in dict.type.dimension"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('任务进度状态') + ':'">
                  <el-checkbox-group v-model="listQuery.progressStatusList">
                    <!-- <el-checkbox label="1" name="type" disabled
                      >等待执行</el-checkbox
                    >
                    <el-checkbox label="2" name="type" disabled
                      >任务超期</el-checkbox
                    > -->
                    <el-checkbox label="3" name="type">{{
                      $t("正在执行")
                    }}</el-checkbox>
                    <el-checkbox label="4" name="type">{{
                      $t("任务暂停")
                    }}</el-checkbox>
                    <el-checkbox label="5" name="type">{{
                      $t("执行完成")
                    }}</el-checkbox>
                    <el-checkbox label="6" name="type">{{
                      $t("中途终止")
                    }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <!-- <el-form-item label="任务结果状态:">
                  <el-checkbox-group v-model="listQuery.taskResultList">
                    <el-checkbox label="1" name="type">成功</el-checkbox>
                    <el-checkbox label="2" name="type">失败</el-checkbox>
                  </el-checkbox-group>
                </el-form-item> -->
              </div>
            </el-collapse-transition>
            <img
              @click="collapseBtn"
              :src="collapseUrl"
              class="collapse-img"
              alt=""
            />
          </el-form>
        </div>
        <div class="btns search-area-btn">
          <div
            @click="searchBtn"
            class="serch-btn cursor-pointer"
            style="width: 80px"
            v-hasPermi="['data:inspectRecords:search']"
          >
            {{ $t("搜索") }}
          </div>
          <div
            @click="resetBtn"
            class="reset-btn cursor-pointer"
            style="width: 80px"
            v-hasPermi="['data:inspectRecords:reset']"
          >
            {{ $t("重置") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="search-area-btn btns defaultVal" style="width: 1000px">
          <el-dropdown @command="defaultReport">
            <el-button type="primary">
              {{ $t("导出巡检报告")
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="item.value"
                v-for="item in options"
                :key="item.value"
                >{{ item.label }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="self">
          <el-table
            ref="tableRef"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="selectionChange"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column
              prop="taskExecId"
              :label="$t('任务ID')"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              :label="$t('任务名称')"
              prop="taskName"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="taskTypeName"
              :label="$t('任务类型')"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="viewTypeName"
              :label="$t('巡检类型')"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="dimensionName"
              :label="$t('巡检维度')"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="beginTime"
              :label="$t('开始时间')"
              show-overflow-tooltip
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="endTime"
              :label="$t('结束时间')"
              show-overflow-tooltip
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="progressStatusName"
              :label="$t('任务进度状态')"
              show-overflow-tooltip
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <div
                  :class="[
                    scope.row.progressStatusName == '恶劣天气联动'
                      ? 'wait'
                      : '',
                    scope.row.progressStatusName == '任务超期' ? 'exceed' : '',
                    scope.row.progressStatusName == '正在执行'
                      ? 'being'
                      : '' || scope.row.progressStatusName == 'executing'
                      ? 'being'
                      : '',
                    scope.row.progressStatusName == '任务暂停' ? 'pause' : '',
                    scope.row.progressStatusName == '执行完成'
                      ? 'finish'
                      : '' ||
                        scope.row.progressStatusName == 'execution complete'
                      ? 'finish'
                      : '',
                  ]"
                >
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.reason"
                    placement="bottom"
                    v-if="scope.row.progressStatusName == '中途终止'"
                  >
                    <span>{{ scope.row.progressStatusName }}</span>
                  </el-tooltip>
                  <span v-else> {{ scope.row.progressStatusName }}</span>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="taskResultName"
              label="任务结果状态"
              show-overflow-tooltip
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <div
                  :style="{
                    color:
                      scope.row.taskResultName == '成功'
                        ? '#73F6AF'
                        : '#FF5562',
                  }"
                >
                  {{ scope.row.taskResultName }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column :label="$t('操作')" width="380" align="center">
              <template slot-scope="scope">
                <div class="table-btns">
                  <div
                    class="serch-btn cursor-pointer"
                    @click="rowTaskClick(scope.row)"
                    v-hasPermi="['data:inspectRecords:view']"
                  >
                    {{ $t("查看巡检报告") }}
                  </div>
                  <div
                    class="serch-btn2 cursor-pointer"
                    @click="identifyClick(scope.row)"
                  >
                    {{ $t("重新识别") }}
                  </div>
                  <!-- <div
                    class="serch-btn cursor-pointer"
                    @click="$router.push('/data/resource')"
                  >
                    采集资源
                  </div> -->

                  <div
                    @click="handleDelete(scope.row.taskExecId)"
                    class="btn-red cuver-point"
                    v-hasPermi="['data:inspectRecords:remove']"
                  >
                    {{ $t("删除") }}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagenation">
          <pagination
            :total="total"
            :page.sync="listQuerySubmit.pageNum"
            :limit.sync="listQuerySubmit.pageSize"
            @pagination="getTableList"
          >
          </pagination>
        </div>
      </div>
    </div>
    <!-- dialog -->
    <el-dialog
      :title="$t('查看')"
      :visible.sync="dialogVisible"
      width="560px"
      @close="closeDialog"
    >
      <!-- 图片 -->
      <div
        v-if="
          dialogBooArr.find((item) => {
            return item.title == 'showPic';
          }).bool
        "
      >
        <div class="dialog-lineone">
          <div>{{ $t("拍摄时间") }}2021-01-17 15:56:08</div>
          <div>{{ $t("文件名") }}1629961250.jpg</div>
          <div class="el-icon-download cursor-pointer"></div>
        </div>
        <div>
          {{ $t("图片") }}
          <img :src="dialogPicSrc" alt="" />
        </div>
      </div>
      <!-- 视频 -->
      <div
        v-if="
          dialogBooArr.find((item) => {
            return item.title == 'showVideo';
          }).bool
        "
      >
        <div class="dialog-lineone">
          <div>{{ $t("录制时间") }}</div>
          <div>{{ $t("文件名") }}</div>
          <div class="el-icon-download cursor-pointer"></div>
        </div>
        <div>
          <video controls style="width: 100%" ref="showVideo">
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
            <!-- <source :src="dialogVideoSrc" type="video/mp4" /> -->
          </video>
        </div>
      </div>
      <!-- 音频 -->
      <div
        v-if="
          dialogBooArr.find((item) => {
            return item.title == 'showAudio';
          }).bool
        "
      >
        <div class="dialog-lineone">
          <div>{{ $t("录制时间") }}</div>
          <div>{{ $t("文件名") }}</div>
          <div class="el-icon-download cursor-pointer"></div>
        </div>
        <div class="display:flex">
          <!-- :music="audio[0]"  -->
          <!-- author: 'Hans Zimmer/Richard Harvey', -->
          <!-- :list="audio" -->
          <aplayer :music="currentAudioUrl" ref="showAudio"></aplayer>
          <div class="change-audio">
            <div class="reset-btn el-icon-arrow-left"></div>
            <div class="reset-btn el-icon-arrow-right"></div>
          </div>
        </div>
      </div>
      <div slot="footer" style="display: flex; justify-content: flex-end">
        <div class="reset-btn" @click="dialogVisible = false">
          {{ $t("取消") }}
        </div>
      </div>
    </el-dialog>
    <!-- 重新识别弹框 -->
    <IdentifyDialog
      :identifyVisible="identifyVisible"
      @taskDialogConfirm="identifyConfirm"
      @taskDialogCancle="identifyCancle"
    ></IdentifyDialog>
  </div>
</template>
<script>
import IdentifyDialog from "./components/IdentifyDialog.vue";
import aplayer from "vue-aplayer";
import moment from "moment";
import {
  API_inspectrecordsList,
  delExecIds,
  API_recognitionResult,
} from "@/api/data/inspectrecords.js";
export default {
  dicts: ["taskType", "viewType", "dimension"],
  components: {
    aplayer,
    IdentifyDialog,
  },
  data() {
    return {
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.listQuery.endTime;
          if (endDateVal) {
            return (
              time.getTime() >=
              new Date(endDateVal).getTime() + 1 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
      // 结束日期
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.listQuery.startTime;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        },
      },
      isCollapse: false, //展开折叠
      dialogVisible: false, //图片dialog
      identifyVisible: false, //重新识别弹框
      taskExecId: "",
      //控制弹框展示组件
      dialogBooArr: [
        {
          title: "showPic",
          bool: false,
        },
        {
          title: "showVideo",
          bool: false,
        },
        {
          title: "showAudio",
          bool: false,
        },
      ],
      // 查询条件
      listQuery: {
        taskName: "", //任务名称
        taskType: "", //任务类型
        viewType: "", //巡检类型
        startTime: moment().subtract(1, "months").format("YYYY-MM-DD HH:mm:ss"), //开始时间
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"), //结束时间
        dimension: "", //巡检维度
        progressStatusList: [], //任务进度状态
        taskResultList: [], //任务结果状态
        pageNum: 1,
        pageSize: 10,
      },
      // 分页总数
      total: 0,
      // 提交参数
      listQuerySubmit: {},
      tableData: [], //表格数据
      selectedTableData: [], //表格选中数据
      // 选中数组
      ids: [],
      progressStatus: [], //选中任务进度状态
      // 非单个禁用
      single: true,
      // 音频播放器
      audio: [
        {
          title: "Preparation",
          // artist: "黄叶",
          url: require("../../../assets/audio.mp3"),
          // pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg",
          lrc: "[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh",
        },
        {
          title: "蒲空英的约定",
          // artist: "黄叶",
          url: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
          // pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg",
          lrc: "[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh",
        },
        {
          title: "无畏",
          // artist: "马頔",
          url: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E9%A9%AC%E9%A0%94%20-%20%E6%97%A0%E7%95%8F.flac",
          // pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E5%AE%B6%E4%B9%8B%E5%90%8D.jpg', // prettier-ignore
          lrc: "[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词",
        },
        {
          title: "蓝乐",
          // artist: "白纸",
          url: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%93%9D%E4%B9%90%20-%20%E7%99%BD%E7%BA%B8.flac",
          // pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/-1992181439.jpg",
          lrc: "[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词",
        },
      ],
      dialogPicSrc: "", //弹框图片url
      dialogVideoSrc: "", //弹框视频url
      currentAudioUrl: "", //弹框音频url
      options: [
        {
          value: "0",
          label: this.$t("精简版PDF"),
        },
        {
          value: "1",
          label: this.$t("完整版PDF"),
        },
        {
          value: "2",
          label: this.$t("导出EXCEL"),
        },
      ],
    };
  },
  watch: {
    isActive: {
      handler(val) {
        if (val == true) {
          this.collapseUrl = require("../../../assets/less.png");
        } else {
          this.collapseUrl = require("../../../assets/more.png");
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.listQuerySubmit = Object.assign({}, this.listQuery);
    this.getTableList();
  },
  methods: {
    numChange(val) {
      console.log(val);
    },
    /**折叠、展开按钮 */
    collapseBtn() {
      this.isCollapse = !this.isCollapse;
    },
    /**搜索 */
    searchBtn() {
      this.listQuery.pageNum = 1;
      this.listQuerySubmit = Object.assign({}, this.listQuery);
      this.getTableList();
    },
    /**重置 */
    resetBtn() {
      this.listQuery = {
        taskName: "", //任务名称
        taskType: "", //任务类型
        viewType: "", //巡检类型
        startTime: "", //开始时间
        endTime: "", //结束时间
        dimension: "", //巡检维度
        progressStatusList: [], //任务进度状态
        taskResultList: [], //任务结果状态
        pageNum: 1,
        pageSize: 10,
      };
      this.searchBtn();
    },

    // 表格选中修改
    selectionChange(val) {
      this.selectedTableData = val;
      this.ids = val.map((item) => item.taskExecId);
      this.progressStatus = val.map((item) => item.progressStatus);
      this.single = val.length !== 1;
    },
    /**表格事件 */
    rowClick(rowInfo, type) {
      //展示图片、视频、音频
      switch (type) {
        case "showPic":
          this.dialogPicSrc = "";
          break;
        case "showVideo":
          this.dialogVideoSrc = "";
          break;
        case "showAudio":
          this.dialogPicSrc = "";
          this.currentAudioUrl = this.audio[0];
          break;
      }
      this.dialogVisible = true;
      this.dialogBooArr.forEach((item) => {
        if (item.title == type) {
          item.bool = true;
        } else {
          item.bool = false;
        }
      });
    },
    /**table数据 */
    getTableList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 任务进度状态
      let progressStatusList = this.listQuerySubmit.progressStatusList;
      if (progressStatusList && progressStatusList.length > 0) {
        if (progressStatusList.indexOf(",") == -1) {
          progressStatusList = String(progressStatusList);
        } else {
          progressStatusList = progressStatusList.join(",");
        }
      }
      // 任务结果状态
      let taskResultList = this.listQuerySubmit.taskResultList;
      if (taskResultList && taskResultList.length > 0) {
        if (taskResultList.indexOf(",") == -1) {
          taskResultList = String(taskResultList);
        } else {
          taskResultList = taskResultList.join(",");
        }
      }
      let obj = {
        ...this.listQuerySubmit,
        progressStatusList: progressStatusList,
        taskResultList: taskResultList,
      };
      API_inspectrecordsList(obj)
        .then((res) => {
          if (res.code == 200) {
            if (res.rows.length > 0) {
              this.tableData = res.rows;
            } else {
              this.tableData = [];
            }
            this.total = Number(res.total);
            this.listQuery = Object.assign({}, this.listQuerySubmit);
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    /**close dialog */
    closeDialog() {
      this.dialogVisible = false;
      this.dialogBooArr.forEach((item) => {
        if (item.title == "showPic") return;
        if (item.bool) {
          this.$refs[item.title].pause();
        }
      });
    },
    // 查看巡检报告
    rowTaskClick(scope) {
      if (scope.dimensionName == "巡检点维度") {
        this.$router.push({
          path: "/inspectrecords/dimensionality",
          query: {
            taskName: scope.taskName,
            taskExecId: scope.taskExecId,
            progressStatus: scope.progressStatus,
            beginTime: scope.beginTime,
          },
        });
      } else {
        this.$router.push({
          path: "/inspectrecords/object",
          query: {
            taskName: scope.taskName,
            taskExecId: scope.taskExecId,
            progressStatus: scope.progressStatus,
            beginTime: scope.beginTime,
          },
        });
      }
    },
    /**重新识别 */
    identifyClick(row) {
      this.identifyVisible = true;
      this.taskExecId = row.taskExecId;
    },
    /**重新识别 弹框确认 */
    identifyConfirm() {
      this.identifyVisible = false;
      this.$message.success(this.$t("重新识别命令已发送"));
      API_recognitionResult({
        taskExecId: this.taskExecId,
      })
        .then((res) => {
          if (res.code == 200) {
          }
        })
        .finally(() => {
          this.taskExecId = "";
        });
    },
    /**重新识别 弹框取消 */
    identifyCancle() {
      this.identifyVisible = false;
      this.$message.info(this.$t("已取消"));
    },
    //删除
    handleDelete(id) {
      this.$confirm(
        this.$t("是否确认删除任务ID为") + "：" + id + this.$t("的数据项"),
        this.$t("提示"),
        {
          confirmButtonText: this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }
      )
        .then(function () {
          return delExecIds(id);
        })
        .then(() => {
          this.$modal.msgSuccess(this.$t("删除成功"));
          this.getTableList();
        })
        .catch(() => {});
    },
    /**
     * 导出巡检报告
     */
    defaultReport(command) {
      let ids = this.ids.join(",");
      if (this.ids.length == 0) {
        this.$message.error(this.$t("请先选择再导出巡检报告"));
      } else if (this.ids.length == 1) {
        let beginTime = this.selectedTableData[0].beginTime
          .replace(/ /g, "")
          .replace(/-/g, "")
          .replace(/:/g, "");
        let progressStatus = this.progressStatus.join(",");
        // 只能是执行完成和中途停止可以导出
        if (progressStatus == "5" || progressStatus == "6") {
          if (command == "0") {
            // 导出精简版pdf
            this.download(
              "/task.result/export.pdf?isSimple=true&execIds=" + ids,
              {
                ...this.queryParams,
              },
              `${this.$t("导出巡检报告名称")}${
                this.selectedTableData[0].taskName
              }${beginTime}.pdf`
            );
          } else if (command == "1") {
            // 导出完整版pdf
            this.download(
              "/task.result/export.pdf?isSimple=false&execIds=" + ids,
              {
                ...this.queryParams,
              },
              `${this.$t("导出巡检报告名称")}${
                this.selectedTableData[0].taskName
              }${beginTime}.pdf`
            );
          } else if (command == "2") {
            // 导出excel
            this.download(
              "/task.result/export.excel?execIds=" + ids,
              {
                ...this.queryParams,
              },
              `${this.$t("导出巡检报告名称")}${
                this.selectedTableData[0].taskName
              }${beginTime}.xlsx`
            );
          } else {
            return;
          }
        } else {
          this.$message.error(this.$t("巡检过程中不支持导出"));
        }
      } else if (this.ids.length > 1) {
        this.$message.error(this.$t("只能选择一个文件导出"));
      }
    },
  },
  // filters: {
  //   getProgress(key) {
  //     let status = "";
  //     switch (Number(key)) {
  //       case 0:
  //         status = this.$t("正在执行");
  //         break;
  //       case 1:
  //         status = this.$t("任务暂停");
  //         break;
  //       case 2:
  //         status = this.$t("执行完成");
  //         break;
  //       case 3:
  //         status = this.$t("中途终止");
  //         break;
  //     }
  //     return status;
  //   },
  // },
};
</script>
<style lang="scss" scoped>
// .right-col {
//   height: 960px;
// }
//搜索
.search-area {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  .form {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding: 22px 16px 0 16px;
  }
  .btns {
    display: flex;
    width: 200px;
    padding: 8px;
    justify-content: space-around;
    align-items: center;
    border-left: 1px dashed rgba(219, 255, 251, 0.2);
  }
}
//表格
.table {
  height: 759px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 24px;
  box-sizing: border-box;
  position: relative;
  .btns {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
    border-left: 0;
  }
  .table-btns {
    display: flex;
    justify-content: center;
    div {
      display: flex;
      height: 28px;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    div:nth-child(2) {
      margin: 0 10px;
    }
  }
  .pagenation {
    position: absolute;
    bottom: 30px;
    right: 20px;
  }
}
.column-imgs {
  img {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
.column-btn {
  display: flex;
  width: 44px;
  height: 32px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
/** 音频播放器*/
.aplayer {
  background-color: transparent;
  color: #fff;
  .aplayer-body {
    display: flex;
    flex-direction: column;
    .aplayer-pic {
    }
  }
}
/**弹框样式 */
.dialog-lineone {
  display: flex;
  margin: 0 0 20px 0;
  div:nth-child(1) {
    width: 50%;
  }
  div:nth-child(2) {
    width: 45%;
  }
  div:nth-child(3) {
    width: 5%;
  }
}
.change-audio {
  display: flex;
  margin-top: 20px;
  justify-content: center;
  div:nth-child(2) {
    margin-left: 20px;
  }
}

// 等待执行
.wait {
  color: #00d1ff;
}
// 任务超期
.exceed {
  color: #ffad30;
}
// 正在执行
.being {
  color: #ff4967;
}
// 任务暂停
.pause {
  color: #ff7000;
}
// 执行完成
.finish {
  color: #73f6af;
}
// 中途停止
.termination {
  color: #cc77dc;
}

::v-deep {
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 195px;
  }
}
::v-deep {
  .el-dialog:not(.is-fullscreen) {
    margin-top: 30vh !important;
  }
}
::v-deep {
  .defaultVal {
    .el-button {
      width: 126px;
      border-radius: 2px;
      border: 1px solid rgba(0, 209, 255, 0.7);
      background-color: rgba(0, 209, 255, 0.2);
      font-size: 13px;
    }
  }
  .self {
    .el-table__body-wrapper {
      width: 100%;
      max-height: 531px;
      overflow: auto;
    }
  }
}
</style>
<style lang="scss">
.el-dropdown-menu {
  box-shadow: 0px 4px 40px 0px #000000;
  border-radius: 2px;
  width: 126px;
  background-color: #344a53;
  border: 0;
  .el-dropdown-menu__item {
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    justify-content: center;
  }
  .el-dropdown-menu__item:nth-child(1) {
    border-bottom: 1px solid #435b62;
  }
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #344a53;
    color: #fff;
  }
}
</style>
